<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
<title>注册</title>
<meta name="author" content="DeathGhost" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<style>
body{height:100%;background:#16a085;overflow:hidden;}
canvas{z-index:-1;position:absolute;}
</style>
<script src="js/jquery.js"></script>
<script src="js/verificationNumbers.js"></script>
<script src="js/Particleground.js"></script>
<script>
$(document).ready(function() {
  //粒子背景特效
  $('body').particleground({
    dotColor: '#5cbdaa',
    lineColor: '#5cbdaa'
  });
  //验证码
  createCode();
	  //注册
  $(".enroll_btn") .click(function(){
	  if (user() == true && passw() == true && phone()== true ) {
		  alert("返回登录页面");
		  location.href="login.html";
	  }
  })
});
</script>
</head>
	<body>	
		
		<dl class="admin_enroll">
		 <dt>
		  <strong>会员注册系统</strong>
		  <em>Registration 	Management</em>
		 </dt>
		 <dd class="user_icon">
		  <input type="text" placeholder="账号" class="login_txtbx" id="user"/>
		 </dd>
		 <dd class="pwd_icon">
		  <input type="password" placeholder="密码" class="login_txtbx" id="password1"/>
		 </dd>
		 <dd class="pwd_icon">
		  <input type="password" placeholder="确认密码" class="login_txtbx" id="password2"/>
		 </dd>
		 <dd class="pwd_icon">
		  <input type="password" placeholder="真实姓名" class="login_txtbx"/>
		 </dd>
		 <dd class="user_icon">
		  <input type="text" placeholder="电话" class="login_txtbx" id="phone"/>
		 </dd>
		 <dd class="user_select">
		  <select name="" id=""  class="login_selectbx" >
			  <option value="" selected  label="--非会员--"></option>
			  <option value="" selected  label="--白银会员--"></option>
			  <option value="" selected  label="--黄金会员--"></option>
			  <option value="" selected disabled="disabled" label="--请选择会员等级--"></option>
		  </select>
		 </dd>
		 <dd class="user_icon">
			 <select name="" id="" class="login_selectbx" >
			 	<option value="" selected  label="--管理员--"></option>
			 	<option value="" selected  label="--买家--"></option>
			 	<option value="" selected  label="--卖家--"></option>
			 	<option value="" selected disabled="disabled" label="--请选择权限--"></option>
			 </select>
		 </dd>
		 <dd class="val_icon">
		  <div class="checkcode">
		    <input type="text" id="J_codetext" placeholder="验证码" maxlength="4" class="login_txtbx">
		    <canvas class="J_codeimg" id="myCanvas" onclick="createCode()">对不起，您的浏览器不支持canvas，请下载最新版浏览器!</canvas>
		  </div>
		  <input type="button" value="验证码核验" class="ver_btn" onClick="validate();">
		 </dd>
		 <dd>
		  <input type="button" value="立即注册" class="enroll_btn"/>
		 </dd>
		 <dd>
		  <p>&copy; 2023-2024 qianfeng 版权所有</p>
		  <p>辽B2-66666666-1</p>
		 </dd>
		</dl>
		
	</body>
	
	<script type="text/javascript">
		// 验证用户名
		function user(){
			var user = document.getElementById("user").value;
			// 正则
			var num = /^[A-Za-z0-9]+$/;
			if (user == "") {
				alert("账户不能为空");
				return false;
			}
			for (let i = 0; i < user.length; i++) {
				if (num.test(user[i]) != true) {
					alert("输入错误 只能输入数字和英文");
					return false;
				}
				if (i == user.length-1 && i>10) {
					alert("输入的长度过长");
					return false;
				}
			}
			return true;
		}
		// 验证密码
		function passw(){
			var password1 = document.getElementById("password1").value;
			var password2 = document.getElementById("password2").value;
			if (password1 == password2 && password1 != "") {
				return true;
			} else{
				alert("两个密码不一致")
			}
			return false;
		}
		// 验证手机号
		function phone(){
			var phone = document.getElementById("phone").value;
			var phonenum = /^1([38][0-9]|4[5-9]|5[0-3,5-9]|66|7[0-8]|9[89])[0-9]{8}$/;
			if (phonenum.test(phone)) {
				return true;
			} else{
				alert("电话号码有误");
			}
			return false;
		}
	</script>
	
</html>